<script setup lang="ts">
import { computed, reactive, ref, getCurrentInstance, onMounted } from "vue";
import { useStore } from "@/store";
import { saveOrderApi } from "@/api/order";
import { useRoute, useRouter } from "vue-router";
import { saveRecordApi } from "@/api/record";

const store = useStore();
const router = useRouter();
const roomDetail = computed(() => store.state.roomDetail);
const orderForm = reactive({
  personNumber: 1,
});

const ruleForm = ref();
const route = useRoute();
const { proxy } = getCurrentInstance();

// 预定按钮
function submitForm() {
  if (store.state.userStatus) {
    saveOrder();
  } else {
    // 跳转到登录页
    let { pathname } = window.location;
    router.replace({
      path: "/login",
      query: {
        redirect: pathname,
      },
    });
  }
}

function saveOrder() {
  const { id: orderId } = route.params;
  const { title, price, imgs } = roomDetail.value;
  const { personNumber } = orderForm;
  const params = {
    orderId,
    title,
    price,
    personNumber,
    pictureUrl: imgs[0],
  };
  saveOrderApi(params).then((res) => {
    console.log(res);
    let { success, message } = res;
    if (success) {
      proxy.$message.success("预订成功");
    } else {
      proxy.$message.error(message);
    }
  });
}
// 保存历史足迹
function savaRecord() {
  const { id: recordId } = route.params;
  const { title, price, imgs, personNumber } = roomDetail.value;
  const params = {
    recordId,
    title,
    price,
    personNumber,
    pictureUrl: imgs[0],
  };
  saveRecordApi(params).then((res) => {
    console.log(res);
    let { success, message } = res;
    if (success) {
      proxy.$message.success("记录成功");
    } else {
      proxy.$message.error(message);
    }
  });
}
// 进入页面调用保存记录接口
onMounted(() => {
  savaRecord();
});
</script>

<template>
  <!-- 照片墙 -->
  <el-carousel
    trigger="click"
    height="300px"
    autoplay
    :interval="3000"
    indicator-position="none"
    type="card"
  >
    <el-carousel-item
      class="imgs-wall"
      v-for="(item, index) in roomDetail.imgs"
      :key="index"
    >
      <img :src="item" />
    </el-carousel-item>
  </el-carousel>
  <!-- 房屋详情信息 -->
  <div class="main-wrapper">
    <div class="room-detail">
      <div class="detail-part">
        <h2>{{ roomDetail.title }}</h2>
        <!-- 房屋信息 -->
        <div class="info">
          <span class="room">{{ roomDetail.info.room }}间我是</span>
          <span class="bed">{{ roomDetail.info.bed }}张床</span>
          <span class="toilet">{{ roomDetail.info.toilet }}洗手间</span>
          <span class="live-number">
            可住{{ roomDetail.info.liveNumber }}人
          </span>
        </div>
        <div class="tags">
          <el-tag size="small" type="danger">
            {{ roomDetail.info.remarks }}评论
          </el-tag>
          <el-tag
            size="small"
            class="m1-10"
            type="danger"
            v-if="roomDetail.info.metro"
          >
            近地铁
          </el-tag>
          <el-tag
            size="small"
            class="m1-10"
            type="warning"
            v-if="roomDetail.info.parking"
          >
            免费停车
          </el-tag>
          <el-tag
            size="small"
            class="m1-10"
            type="success"
            v-if="roomDetail.info.luggage"
          >
            可放置行李
          </el-tag>
        </div>
        <!-- 房东信息 -->
        <div class="owner-detail">
          <img :src="roomDetail.owner.avatar" alt="" />
          <div class="info">
            <p>{{ roomDetail.owner.name }}</p>
            <p>
              <span v-if="roomDetail.owner.certify">是否验证身份</span>
              <span v-if="roomDetail.info.goodOwner">超赞房东</span>
            </p>
          </div>
        </div>
        <!-- 基本介绍 -->
        <div class="introduce">{{ roomDetail.owner.introduce }}</div>
      </div>
      <el-affix :offset="15">
        <div class="form-part">
          <p class="price">
            <span>￥{{ roomDetail.price }}/晚</span>
          </p>
          <el-form
            ref="ruleForm"
            :model="orderForm"
            label-position="top"
            class="order-ruleForm"
          >
            <!-- 人数 -->
            <el-form-item prop="orderForm" label="人数">
              <select v-model="orderForm.personNumber">
                <option v-for="item in 3" :value="item" :key="item">
                  {{ item }}
                </option>
              </select>
            </el-form-item>
            <!-- 预定按钮 -->
            <el-form-item>
              <el-button class="login-btn" type="primary" @click="submitForm">
                预定
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-affix>
    </div>
  </div>
</template>

<style lang="scss">
@import "@/assets/scss/detail/index.scss";
@import "@/assets/scss/common/toast.scss";
</style>
